{% extends 'base.html' %}

{% block title %}
<title>{{ video.name }} - 公开课学习</title>
{% endblock %}

{% load staticfiles %}

{% block custom_bread %}
<section>
    <div class="wp">
        <div class="crumbs">
            <ul>
                <li><a href="{% url 'index' %}">首页</a>></li>
                <li><a href="{% url 'courses:course_list' %}">公开课程</a>></li>
                <li><a href="{% url 'courses:course_detail' course.id %}">{{ course.name }}</a>></li>
                <li>{{ video.name }}</li>
            </ul>
        </div>
    </div>
</section>
{% endblock %}

{% block custom_css %}
<link rel="stylesheet" type="text/css" href="{% static 'css/video-js.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/base.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/common-less.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/learn-less.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/mooc.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/common-less.css' %}">
<style>
        .video-js .vjs-big-play-button{
            top: 50%;
            left: 50%;
        }
</style>
{% endblock %}

{% block custom_js %}
<script src="{% static 'js/video.min.js' %}" type="text/javascript"></script>
{% endblock %}

{% block main_content %}
<div id="main">

    <div class="course-info-main clearfix w has-progress">
        <div>
            <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
                   controls preload="none" width="1200"
                   poster="http://video-js.zencoder.com/oceans-clip.png"
                   data-setup="{}">
                <source src="{{ MEDIA_URL }}{{ video.video_file }}" type='video/mp4'>
            </video>
        </div>
        <div class="info-bar clearfix">
            <div class="content-wrap clearfix">
                <div class="content">
                    <div class="mod-tab-menu">
                        <ul class="course-menu clearfix">
                            <li><a class="ui-tabs-active active" id="learnOn"
                                   href="{% url 'courses:course_info' course.id %}"><span>章节</span></a></li>
                            <li><a id="commentOn" class=""
                                   href="{% url 'courses:course_comments' course.id %}"><span>评论</span></a></li>
                        </ul>
                    </div>

                    <div class="mod-chapters">
                        {% for lesson in course.lesson_set.get_queryset %}
                        <div class="chapter chapter-active">
                            <h3>
                                <strong><i class="state-expand"></i>{{ lesson.name }}</strong>
                            </h3>
                            <ul class="video">

                                {% for video in lesson.video_set.get_queryset %}
                                <li>
                                    <a target="_blank" href="{% url 'courses:video_play' video.id %}"
                                    class="J-media-item studyvideo">{{ video.name }} ({{ video.learn_times }})
                                    <i class="study-state"></i>
                                    </a>
                                </li>
                                {% endfor %}

                            </ul>
                        </div>
                        {% endfor %}
                    </div>

                </div>
                <div class="aside r">
                    <div class="bd">

                        <div class="box mb40">
                            <h4>资料下载</h4>
                            <ul class="downlist">
                                {% for course_resource in course.courseresource_set.get_queryset %}
                                <li>
                                    <span><i class="aui-iconfont aui-icon-file"></i>&nbsp;&nbsp;{{ course_resource.name }}</span>
                                    <a href="{{ MEDIA_URL }}{{ course_resource.download }}" class="downcode"
                                       target="_blank" download="" data-id="274" title="{{ course_resource.name }}">下载</a>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="box mb40">
                            <h4>讲师提示</h4>
                            <div class="teacher-info">
                                <a href="" target="_blank">
                                    <img src='{{ MEDIA_URL }}{{ course.teacher.image }}' width='80' height='80'/>
                                </a>
                                <span class="tit">
          <a href="" target="_blank">{{ course.teacher.name }}</a>
        </span>
                                <span class="job">{{ course.teacher.work_position }}</span>
                            </div>
                            <div class="course-info-tip">
                                <dl class="first">
                                    <dt>课程须知</dt>
                                    <dd class="autowrap">{{ course.you_need_know }}</dd>
                                </dl>
                                <dl>
                                    <dt>老师告诉你能学到什么？</dt>
                                    <dd class="autowrap">{{ course.teacher_tell }}</dd>
                                </dl>
                            </div>
                        </div>


                        <div class="cp-other-learned  js-comp-tabs">
                            <div class="cp-header clearfix">
                                <h2 class="cp-tit l">该课的同学还学过</h2>
                            </div>
                            <div class="cp-body">
                                <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course"
                                     style="display: block">
                                    <!-- img 200 x 112 -->
                                    <ul class="other-list">

                                        {% for relate_course in relate_courses %}
                                        <li class="curr">
                                            <a href="{% url 'courses:course_detail' relate_course.id %}" target="_blank">
                                                <img src="{{ MEDIA_URL }}{{ relate_course.image }}"
                                                     alt="{{ relate_course.name }}">
                                                <span class="name autowrap">{{ relate_course.name }}</span>
                                            </a>
                                        </li>
                                        {% endfor %}

                                    </ul>
                                </div>
                                <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="plan">
                                    <ul class="other-list">

                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="clear"></div>

        </div>

    </div>
</div>
{% endblock %}